<template>
  <div style="height: 100%">
    <dv-full-screen-container>
      <dv-loading v-if="loading">Loading...</dv-loading>
      <dv-border-box-11 v-else  class="full_screen" style="padding: 0px;">

        <el-row :gutter="10" style="height:100%">
          <el-col :span="7" style="height:100%">
            <div style="display: flex;flex-direction: column;height: 100%;">

              <div style="flex: 1;overflow-y: hidden;margin-top: 10px;">
                <dv-border-box-10>
                  <div
                    style="padding-left: 10px;padding-right: 10px;padding-bottom: 20px;height: 100%;display: flex;align-items: center;">
                    <el-row :gutter="10" class="menu_row">
                      <el-col :span="12" class="menu_col">
                        <HomeMenu title="年度安全目标" />
                      </el-col>
                      <el-col :span="12" class="menu_col">
                        <HomeMenu title="安全责任书签署" />
                      </el-col>

                      <el-col :span="12" class="menu_col">
                        <HomeMenu title="标准化建设进度" />
                      </el-col>
                      <el-col :span="12" class="menu_col">
                        <HomeMenu title="双重预防机制" />
                      </el-col>
                    </el-row>
                  </div>
                </dv-border-box-10>
              </div>
              <div style="flex: 1;overflow-y: hidden;margin-top: 10px;margin-bottom: 10px;">
                <dv-border-box-10>
                  <div
                    style="padding-left: 10px;padding-right: 10px;padding-bottom: 20px;height: 100%;display: flex;align-items: center;">
                    <el-row :gutter="10" class="menu_row">
                      <el-col :span="12" class="menu_col">
                        <HomeMenu title="载体安全事故" />
                      </el-col>
                      <el-col :span="12" class="menu_col">
                        <HomeMenu title="典型安全师傅" />
                      </el-col>

                      <el-col :span="12" class="menu_col">
                        <HomeMenu title="....." />
                      </el-col>
                      <el-col :span="12" class="menu_col">
                        <HomeMenu title="....." />
                      </el-col>
                    </el-row>
                  </div>
                </dv-border-box-10>
              </div>

            </div>
          </el-col>
          <el-col :span="10" style="height:100%">
            <div
              style="flex: 1;margin: 0px 10px ;display: flex;flex-direction: column;height: 100%;">
              <!-- <dv-charts :option="option1" style="height: 400px;" />
              <dv-charts :option="option1" style="height: 400px;" /> -->
              <div style="flex: 1;">
                <dv-border-box-8 :color="['#025d6d']">
                  <div style="height:100%;" ref="echarts1"> </div>
                </dv-border-box-8>

              </div>
              <div style="flex: 1;">

                <dv-border-box-8 :color="['#025d6d']" style="flex: 1;">
                  <div style="height:100%;" ref="echarts2"> </div>
                </dv-border-box-8>
              </div>

            </div>
          </el-col>
          <el-col :span="7" style="height:100%">
            <div style="display: flex;flex-direction: column;height: 100%;">

              <div style="flex: 1;overflow-y: hidden;margin-top: 10px;">
                <dv-border-box-10>
                  <div
                    style="padding-left: 10px;padding-right: 10px;padding-bottom: 20px;height: 100%;display: flex;align-items: center;">
                    <el-row :gutter="10" class="menu_row">
                      <el-col :span="12" class="menu_col">
                        <HomeMenu title="新入驻企业安全评估" />
                      </el-col>
                      <el-col :span="12" class="menu_col">
                        <HomeMenu title="装修期间安全追踪" />
                      </el-col>

                      <el-col :span="12" class="menu_col">
                        <HomeMenu title="退租安全管理追踪" />
                      </el-col>

                    </el-row>
                  </div>
                </dv-border-box-10>
              </div>

              <div style="flex: 1;overflow-y: hidden;margin-top: 10px;">
                <dv-border-box-10>
                  <div
                    style="padding-left: 10px;padding-right: 10px;padding-bottom: 20px;height: 100%;display: flex;align-items: center;">
                    <el-row :gutter="10" class="menu_row">
                      <el-col :span="12" class="menu_col">
                        <HomeMenu title="应急预案" />
                      </el-col>
                      <el-col :span="12" class="menu_col">
                        <HomeMenu title="应急物资" />
                      </el-col>

                      <el-col :span="12" class="menu_col">
                        <HomeMenu title="紧急应变联系人" />
                      </el-col>
                      <el-col :span="12" class="menu_col">
                        <HomeMenu title="演练报告" />
                      </el-col>
                    </el-row>
                  </div>
                </dv-border-box-10>
              </div>
              <div style="flex: 1;overflow-y: hidden;margin-top: 10px;margin-bottom: 10px;">
                <dv-border-box-10>
                  <div
                    style="padding-left: 10px;padding-right: 10px;padding-bottom: 20px;height: 100%;display: flex;align-items: center;">
                    <el-row :gutter="10" class="menu_row">
                      <el-col :span="12" class="menu_col">
                        <HomeMenu title="安全知识分享" />
                      </el-col>
                      <el-col :span="12" class="menu_col">
                        <HomeMenu title="文件及法规下载" />
                      </el-col>

                      <el-col :span="12" class="menu_col">
                        <HomeMenu title="安全标准下载" />
                      </el-col>
                      <el-col :span="12" class="menu_col">
                        <HomeMenu title="......" />
                      </el-col>
                    </el-row>
                  </div>
                </dv-border-box-10>
              </div>

            </div>
          </el-col>

        </el-row>

        <!-- <dv-loading v-if="loading">Loading...</dv-loading> -->
      </dv-border-box-11>
    </dv-full-screen-container>
  </div>
</template>
<script>
import HomeMenu from '@/components/HomeMenu';
// import Charts from '@jiaminghi/charts';

export default {
  components: { HomeMenu },
  data() {
    return {
      loading: true,
      option1: {},
    };
  },
  methods: {
    loadCharts() {
      const colorList = [
        '#ffbe7d',
        '#86bcb6',
        '#79706e',
        '#59a14f',
        '#b6992d',
        '#8cd17d',
        '#a0cbe8',
        '#f1ce63',
        '#f28e2b',
      ];
      this.option1 = {
        xAxis: {
          type: 'category',
          axisLabel: {
            textStyle: {
              color: '#fff',
            },
          },
          data: [
            'Jan',
            'Fab',
            'Mar',
            'Apr',
            'May',
            'Jun',
            'Jul',
            'Aug',
            'Sep',
            'Oct',
            'Nov',
            'Dec',
          ],
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#fff',
            },
          },
        },
        series: [
          {
            itemStyle: {
              normal: {
                //这里是颜色
                color: function (params) {
                  return colorList[params.dataIndex % colorList.length];
                },
              },
            },
            data: [
              120,
              {
                value: 200,
              },
              150,
              80,
              70,
              110,
              130,
              18,
              56,
              122,
              78,
              17,
            ],
            type: 'bar',
          },
        ],
      };
      // const container = document.getElementById('container1');
      const myChart = this.$echarts.init(this.$refs.echarts1);
      myChart.setOption(this.option1);

      const myChart1 = this.$echarts.init(this.$refs.echarts2);
      myChart1.setOption(this.option1);

      window.onresize = function () {
        //自适应大小
        myChart.resize();
      };
    },
  },

  mounted() {
    setTimeout(() => {
      this.loading = false;
    }, 500);

    setTimeout(() => {
      this.loadCharts();
    }, 500);
  },
};
</script>
<style>
.menu_text {
  color: #01ccec;
  font-size: 15px;
}

.border-box-content {
  padding: 10px;
  box-sizing: border-box;
}

.menu_row {
}

.menu_col {
  height: 60px;
  margin-bottom: 15px;
}
</style>